<template>
    <div class="todayData">
        <el-card class="box-card">
            <div class="title">
                <div class="titleInfo">
                    商品总览
                </div>
                <el-button type="text" class="button" @click="button()">
                        商品管理 >
                </el-button>
            </div>
            <div class="info">
                <div class="label">
                    <div class="infoTop">
                        <!-- <svg t="1715964654174" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14781" width="32" height="32"><path d="M512.227556 0C229.944889 0 1.137778 229.091556 1.137778 511.715556c0 282.567111 228.807111 511.658667 511.089778 511.658666s511.089778-229.091556 511.146666-511.658666C1023.374222 229.091556 794.510222 0 512.227556 0z m275.683555 380.871111L442.197333 727.04c-6.826667 6.826667-18.602667 6.030222-26.396444-1.706667l-23.153778-23.210666-154.908444-155.079111a19.911111 19.911111 0 0 1 0-28.216889l42.211555-42.268445a19.911111 19.911111 0 0 1 28.16 0l121.742222 121.856 287.687112-287.971555c6.826667-6.826667 18.659556-6.030222 26.396444 1.706666l42.268444 42.325334c7.793778 7.793778 8.533333 19.626667 1.706667 26.453333z" fill="#55A6FF" p-id="14782"></path></svg> -->
                        <svg t="1715964783399" class="icon" viewBox="0 0 1415 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21375" width="32" height="32"><path d="M1229.764646 52.385975l-718.724532 717.137943-317.317674-317.317674a109.315939 109.315939 0 0 0-72.983065-34.904944 88.69029 88.69029 0 0 0-69.809888 26.972002c-19.03906 20.625649-28.558591 42.837886-26.972003 69.809889 1.586588 26.972002 12.692707 50.770828 34.904945 72.983065l385.540973 383.954385a90.911514 90.911514 0 0 0 133.273424 0l785.361243-785.361243a92.022125 92.022125 0 0 0 0-133.273423 92.022125 92.022125 0 0 0-133.273423 0z" fill="#1296db" p-id="21376"></path><path d="M1415.236826 119.022686A112.647774 112.647774 0 0 0 1380.331882 34.933503 112.647774 112.647774 0 0 0 1296.242698 0.028559a112.647774 112.647774 0 0 0-84.089183 34.904944L510.881455 736.205562l-299.865202-301.45179c-26.972002-25.385414-55.530593-39.664709-88.848948-41.251298-33.318356-1.586588-63.463535 9.51953-88.848949 33.318356v1.586589c-23.798826 25.385414-34.904944 55.530593-33.318356 87.26236 1.586588 33.318356 15.865884 61.876946 41.251298 88.848949l385.540974 382.367797a116.614245 116.614245 0 0 0 107.888009 34.904944c22.212237-4.759765 41.251298-15.865884 60.290358-33.318356L1380.331882 203.11187a112.647774 112.647774 0 0 0 34.904944-84.089184zM560.065695 953.568169c-11.106119 12.692707-22.212237 19.03906-34.904944 20.625649a62.987558 62.987558 0 0 1-63.463535-19.039061v-1.586588L76.156242 569.613783a89.800902 89.800902 0 0 1-28.558591-57.117181c-1.586588-19.03906 6.346353-34.904944 20.625649-52.357416 14.279295-14.279295 31.731767-20.625649 50.770828-19.03906 20.625649 1.586588 41.251298 11.106119 57.117181 28.55859l317.317674 317.317674c3.173177 1.586588 6.346353 3.173177 7.932942 4.759765 3.173177 1.586588 6.346353 1.586588 9.51953 1.586589 3.173177 0 6.346353 0 9.51953-1.586589 3.173177-1.586588 4.759765-3.173177 7.932942-4.759765L1247.058459 69.838447V68.251859c12.692707-14.279295 30.145179-20.625649 49.184239-20.625649s36.491533 6.346353 49.18424 20.625649c0 1.586588 1.586588 1.586588 1.586588 1.586588 14.279295 12.692707 20.625649 30.145179 20.625649 49.184239s-6.346353 36.491533-22.212237 49.18424L560.065695 953.568169z" fill="#1296db" p-id="21377"></path></svg>
                        已启用
                    </div>
                    <div class="infoMid">
                         {{ res.sold }}
                    </div>
                </div>
                <div class="label">
                    <div class="infoTop">
                        <svg t="1716033002452" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6077" width="32" height="32"><path d="M511.697613 0c-282.666848 0-511.676635 229.009787-511.676635 511.677659S229.030765 1023.355317 511.697613 1023.355317c282.670941 0 511.677659-229.010811 511.677659-511.677658S794.368554 0 511.697613 0z" fill="#FFFFFF" p-id="6078"></path><path d="M511.697613 146.218176c73.110111 0 143.680377 22.677489 201.64351 60.495816L206.737016 713.321168c-37.820374-57.966203-60.575634-126.002762-60.575633-201.644533 0-201.64351 163.895791-365.458459 365.53623-365.458459z m0 730.922035c-73.106018 0-143.677307-22.676465-201.64044-60.500932l506.603083-506.606153c37.821397 57.966203 60.576657 126.001739 60.576657 201.643509 0.001023 201.644533-163.895791 365.463576-365.5393 365.463576z m0 146.215106c282.361903 0 511.677659-229.39762 511.677659-511.677658 0-282.281061-229.316779-511.677659-511.677659-511.677659-282.357809 0-511.676635 229.396597-511.676635 511.677659 0 282.280038 229.318826 511.677659 511.676635 511.677658z" fill="#F85238" p-id="6079"></path></svg>
                        已停用
                    </div>
                    <div class="infoMid">
                         {{ res.discontinued }}
                    </div>
                </div>
                <div class="bt" @click="add()">
                    <div>
                        <svg t="1715964188851" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10959" width="32" height="32"><path d="M953.37931 512C953.37931 268.232939 755.767084 70.62069 512 70.62069 268.232934 70.62069 70.62069 268.232939 70.62069 512 70.62069 755.767061 268.232934 953.37931 512 953.37931 755.767084 953.37931 953.37931 755.767061 953.37931 512ZM547.310345 476.689655 547.310345 264.858364C547.310345 245.21731 531.501374 229.517241 512 229.517241 492.362681 229.517241 476.689655 245.340001 476.689655 264.858364L476.689655 476.689655 264.858359 476.689655C245.217315 476.689655 229.517241 492.498635 229.517241 512 229.517241 531.637326 245.340001 547.310345 264.858359 547.310345L476.689655 547.310345 476.689655 759.141636C476.689655 778.78269 492.498626 794.482759 512 794.482759 531.637319 794.482759 547.310345 778.659999 547.310345 759.141636L547.310345 547.310345 759.141694 547.310345C778.78272 547.310345 794.482759 531.501365 794.482759 512 794.482759 492.362674 778.660017 476.689655 759.141694 476.689655L547.310345 476.689655ZM0 512C0 229.230209 229.230204 0 512 0 794.769832 0 1024 229.230209 1024 512 1024 794.769791 794.769832 1024 512 1024 229.230204 1024 0 794.769791 0 512Z" fill="#707070" p-id="10960"></path></svg>
                    </div>
                    <div>新增商品</div>
                </div>
            </div>
        </el-card>
    </div>

</template>

<script>
import {overviewDishes} from '@/api/workspace'
export default {
    data(){
        return{
            res:{
                sold: 14,
                discontinued: 0
            }
        }
    },
    create(){
        overviewDishes().then(res=>{
            this.res = res.data
        })
    },
    methods:{
        button(){
            this.$router.push('/home/product')
            this.$store.state.menu_active = 4
        },
        add(){
            this.$router.push({
                path:'/home/addProduct',
                query:{
                    methods:'add'
                }
            })
        }
    }
}
</script>

<style scoped>
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    /* width: 480px; */
    width: 100%;
    height: 180px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    /* justify-content: space-around; */
}

.todayData{
    width: 49%;
    height: 180px;
    margin-top: 5px;
}

.label{
    width: 35%;
    height: 80%;
    border-radius: 5px;
    background: rgb(236,245,255);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bt{
    width: 20%;
    height: 80%;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #1677ffb9;
}



.box-card:hover,.bt:hover{
    /* margin-top: -5px; */
    transform: scale(1.005);
    box-shadow: 0 0 10px 2px #d5d4d4;/*盒子阴影*/
    transition: all 0.5s;/*持续时间*/

}

.title{
    height: 30px;
    display: flex;
    justify-content: space-between;
}

.info{
    width: 100%;
    height: 85%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-top: -8px;
}

.titleInfo{
    font-weight: bold;
}

.button{
    align-self: end;
    color: #9e9e9e;
    font-weight: 500;
}

::v-deep .box-card .el-card__body{
    height: 100%;
}

.infoTop{
    font-size: 14px;
    height: 50%;
    align-items: center;
    line-height: 40px;
    text-align: left;
    margin-left: 15px;
}

.infoMid{
    font-weight: bold;
    font-size: 26px;
    /* height: 80%; */
    text-align: left;
    margin-right: 15px;
}
</style>